let registerComponent = {
    template: `
        <div class="register">
            <div class="head">
                <div class="left" @click="back">
                    <span class="iconfont icon-ali-fanhui"></span>
                </div>
                <div class="title">register</div>
                <div class="right"></div>
            </div>
            <el-form
              ref="form"
              size="medium"
              :rules="rules"
              :model="queryForm"
              label-width="160px"
              label-position="top"
              style="width: 90%; margin: 0 auto"
        >
          <el-form-item label="email：" prop="email">
            <el-input
              v-model="queryForm.email"
              placeholder="please input your email"
              clearable
            >
            </el-input>
          </el-form-item>
           <el-form-item label="verification code：" prop="verification">
            <el-input
              v-model="queryForm.verification"
              placeholder="please input your verification code"
              clearable
            >
                <template slot="append">
                       <el-button type="primary"  @click="getVerification" :disabled="count>0">{{count>0?count:'get'}}</el-button>
                </template>
            </el-input>
          </el-form-item>
          <el-form-item label="user ID：" prop="userKey">
            <el-input
              v-model="queryForm.userKey"
              placeholder="please input your user ID"
              clearable
              @keyup.enter.native="onSubmit"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="password：" prop="password">
            <el-input
              type="password"
              v-model="queryForm.password"
              placeholder="please input your password"
              clearable
              @keyup.enter.native="onSubmit"
            ></el-input>
          </el-form-item>
           <el-form-item label="confirm password：" prop="cPassword">
            <el-input
              type="password"
              v-model="queryForm.cPassword"
              placeholder="please confirm your password"
              clearable
              @keyup.enter.native="onSubmit"
            ></el-input>
          </el-form-item>
         
          <el-form-item class="marginbt0">
            <el-button type="primary" @click="onSubmit" class="login-btn"
              >submit</el-button
            >
          </el-form-item>
        </el-form>
        </div>
    `,
    data() {
        return {
            rules: {
                email: [
                    {
                        required: true,
                        message: "please input your email",
                        trigger: "blur",
                    },
                ],
                verification: [
                    {
                        required: true,
                        message: "please input your verification code",
                        trigger: "blur",
                    },
                ],
                userKey: [
                    {
                        required: true,
                        message: "please input your account",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "please input your password",
                        trigger: "blur",
                    },
                ],
                cPassword: [
                    {
                        required: true,
                        message: "please confirm your password",
                        trigger: "blur",
                    },
                ]
            },
            queryForm: {
                email:null,
                verification:null,
                userKey:null,
                password:null,
                cPassword:null
            },
            checked: true,
            count:0
        }

    },
    computed: {},
    watch: {},
    mounted() {
    },
    activated() {

    },
    methods: {
        back(){
          this.$router.back()
        },
        getVerification(){

            user.getValidation(this.queryForm.email).then((r)=>{
                this.$message.success('Verification code sent successfully')
                this.count = 60
                let timer = setInterval(()=>{
                    this.count --
                    if(this.count<=0){
                        clearInterval(timer)
                    }
                },1000)
            }).catch(()=>{
                this.$message.error('Verification code sent failed')
            })
        },
        onSubmit(){
            this.$refs.form.validate((flag)=>{
                if(flag){
                    user.register({
                        user:{
                            email: this.queryForm.email,
                            name: this.queryForm.userKey,
                            gender: 1
                        },
                        context:{
                            platform: platform,
                            identity: this.queryForm.userKey,
                            token: CryptoJS.MD5(this.queryForm.password).toString(CryptoJS.enc.Hex)
                        },
                        evidence: this.queryForm.verification
                    }).then(()=>{
                        this.$message.success('Account registration successfully,Coming back to the login page soon')
                        setTimeout(()=>{
                            this.$router.back()
                        },1000)
                    }).catch(()=>{
                        this.$message.error('Account registration failed')
                    })
                }
            })
        }
    },
    components: {},
    beforeRouteLeave(to, from, next) {

        next();
    }
}

